<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>home</title>
		<link rel="stylesheet" type="text/css" href="css/program.css" />
	</head>
	<body>
		<!--头部区域-->
		<header>
			<!--插入logo-->
			<div id="logo">
				<img src="img/img1/shininglogo.png" />
			</div>
			<!--导航栏-->
			<div id="navigation">
				<a href="home.html">Home</a>
				<a href="about.html">About</a>
				<a href="rendering.html">Rendering</a>
				<a href="3DAnimation.html">3D Animation</a>
				<a href="Bin.html">Bin</a>
				<a href="contact.html">Contact</a>
			</div>
			<div id="navigationMerge">
				<img src="img/img1/nav.png" />
			</div>
		</header>
		<ul id="navigationHidden">
			<li>
				<a href="home.html">Home</a>
			</li>
			<li>
				<a href="about.html">About</a>
			</li>
			<li>
				<a href="rendering.html">Rendering</a>
			</li>
			<li>
				<a href="3DAnimation.html">3D Animation</a>
			</li>
			<li>
				<a href="Bin.html">Bin</a>
			</li>
			<li>
				<a href="contact.html">Contact</a>
			</li>
		</ul>
		<!--内容区域   黄色的是margin撑出来的-->
		<content id="HomeContent">
			<div>
				<div class="leftHome"><img src="img/img1/home_pic_one.png" /></div>
				<div class="textHome rightHome">
					<h2>RENDERINGS</h2> Masterplan、Public Buliding、commercial <br /> Buliding、Residential Buliding、Landspace <br /> Design
				</div>
			</div>
			<div>
				<div class="textHome leftHome">
					<h2>RENDERINGS</h2> Masterplan、Public Buliding、commercial <br /> Buliding、Residential Buliding、Landspace <br /> Design
				</div>
				<div class="rightHome"><img src="img/img1/home_pic_two.jpg" /></div>
			</div>
			<div>
				<div class="leftHome"><img src="img/img1/homes_pic_three.jpg" /></div>
				<div class="textHome rightHome">
					<h2>RENDERINGS</h2> Masterplan、Public Buliding、commercial <br /> Buliding、Residential Buliding、Landspace <br /> Design
				</div>
			</div>
		</content>
		<footer>
			<div id="footerTop">
				<img src="img/img1/footer0.jpg" />
			</div>
			<div id="footerCenter">
				<img src="img/img1/footer1.jpg" />
				<img src="img/img1/footer2.jpg" />
				<img src="img/img1/footer3.jpg" />
				<img src="img/img1/footer4.jpg" />
			</div>
			<div id="footerBottom">
				Copyright © 1998-2015 shining Group
			</div>
		</footer>
		<script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jsPicture.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("footer").css({
				top: $("header").height() + $("content").height()
			});
			$("content>div").mouseenter(function() {
				var index1;
				switch($(this).index()) {
					case 0:
						index1 = "home_pic_one_h.png";
						break;
					case 1:
						index1 = "home_pic_two_h.png";
						break;
					case 2:
						index1 = "homes_pic_three_h.jpg";
						break;
					default:
						break;
				}
				$(this).css("background-color","yellow");
				$("content>div:eq(" + $(this).index() + ")>div>img").attr("src", "img/img1/" + index1);
			});
			$("content>div").mouseleave(function() {
				var index2;
				switch($(this).index()) {
					case 0:
						index2 = "home_pic_one.png";
						break;
					case 1:
						index2 = "home_pic_two.jpg";
						break;
					case 2:
						index2 = "homes_pic_three.jpg";
						break;
					default:
						break;
				}
				$(this).css("background-color","gray");
				$("content>div:eq(" + $(this).index() + ")>div>img").attr("src", "img/img1/" + index2);
			});
		</script>
	</body>

</html>